{% extends 'base_iframe.html' %}
{% block content %}
    <form class="layui-form" action="" method="post">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" placeholder="单机唯一，cluster一致"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">主机</label>
                <div class="layui-input-inline">
                    <input type="text" name="host" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">端口</label>
                <div class="layui-input-inline">
                    <input type="text" name="port" lay-verify="required|number" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">DB数</label>
                <div class="layui-input-inline">
                    <input type="text" name="database" lay-verify="required|number" placeholder="" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="" placeholder="请输入username" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" lay-verify="" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="0" title="单机" checked>
                <input type="radio" name="type" value="1" title="cluster">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script>
        //Demo
        layui.use('form', function () {
            var form = layui.form,
                $ = layui.jquery;

            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }

                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.load();
                $.ajax({
                    url: '/redis/list/add/',
                    dataType: 'json',
                    type: 'post',
                    data: data.field,
                    success: function (result) {
                        layer.closeAll('loading');
                        layer.alert(' 消息: ' + result.msg)
                    },
                    error: function () {
                        layer.closeAll('loading');
                        layer.msg('请求错误', {icon: 5})
                    }
                });
                return false;
            });
        });
    </script>
{% endblock %}